<template>
	<view>
		<u-sticky bgColor="#fff">
			<!-- <view class="blank20"></view>
			<view class="wrapper font-bold">
				{{ date }}
			</view>
			<view class="blank20"></view>
			<u-line></u-line>
			<view class="blank20"></view> -->
			<view class="flex bg-gray">
				<template v-for="col in tableHd">
					<view class="col-item font-24" :style="[col.style]">
						{{col.title}}
					</view>
				</template>
			</view>
		</u-sticky>

		<template v-for="v in list">
			<item :table="tableHd" :detail="v" @del="delItem" @updata="updataItem"></item>
		</template>

		<view class="bgw" v-if="false">
			<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
				<template v-for="(v, index) in list">
					<view class="blank20"></view>
					<view class="">
						<u-row justify="space-between" gutter="3">
							<template v-for="col in tableHd">
								<u-col :span="col.span">
									<view class="text-center" style="padding-left: 10px"
										v-if="col.key == '_material_id'">
										<u-checkbox :key="index" :name="index" :label="v[col.key]" activeColor="#675f91"
											shape="circle" labelSize="14"></u-checkbox>
									</view>
									<view class="text-center" v-else>
										{{ v[col.key] }}
									</view>
								</u-col>
							</template>
						</u-row>
						<view class="blank20"></view>
						<u-line dashed></u-line>
					</view>
				</template>
			</u-checkbox-group>
		</view>

		<view class="blank"></view>
		<view class="fixed-bottom bgw">
			<u-line></u-line>
			<view class="flex">
				<view class="flex-1" style="padding-left: 15px">
					<!-- <u-checkbox-group placement="column" v-model="checkboxAllValue" @change="checkboxAllChange">
						<u-checkbox :key="0" :name="0" label="全选" activeColor="#675f91" shape="circle"></u-checkbox>
					</u-checkbox-group> -->
				</view>
				<view class="btn-confirm" @click="save"> 出库 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		stock_out_app_detail,
		stock_out_record,
		one_stock_out_record_detail,
		confirm_to_stock_out,
	} from "@/common/api.js";
	import item from './components/item.vue';
	export default {
		components: {
			item,
		},
		data() {
			return {
				from:'',
				ids:[],
				id: 0,
				list: [],
				tableHd: [{
						title: "食材",
						key: "_material_id",
						style: {
							width: '200rpx'
						}
					},
					{
						title: "数量",
						key: "actual_main_qty",
						style: {
							flex: 1
						}
					},
					{
						title: "单位",
						key: "_main_unit_id",
						style: {
							width: '70rpx',
						}
					},
					// {
					// 	title: "金额",
					// 	key: "main_price",
					// 	style: {
					// 		flex: 1
					// 	}
					// },
					{
						title: "库存",
						key: "stock_qty",
						style: {
							width: '70rpx',
						}
					},
					
					{
						title: "日期",
						key: "date",
						style: {
							width: '230rpx',
						}
					},
					{
						title: "",
						key: "action",
						style: {
							width: '70rpx',
						}
					},
				],
				bagList: [],
				material_obj: {},
				checkboxValue: [],
				checkboxAllValue: [0],
			};
		},
		methods: {
			// checkboxChange(e) {
			// 	if (e.length == this.list.length) {
			// 		this.checkboxAllValue = [0];
			// 	} else {
			// 		this.checkboxAllValue = [];
			// 	}
			// },
			// checkboxAllChange(e) {
			// 	if (e.length == 0) {
			// 		this.checkboxValue = [];
			// 	} else {
			// 		let checkboxValue = [];
			// 		this.list.forEach((v, i) => {
			// 			checkboxValue.push(i);
			// 		});
			// 		this.checkboxValue = checkboxValue;
			// 	}
			// },
			delItem(data) {
				this.list = this.list.filter(v => v.material_id != data.material_id);
			},
			updataItem(data){
				// console.log(data);
				// #ifdef MP-WEIXIN
				let index = this.list.findIndex(v=>v.material_id == data.material_id);
				// this.list[index] = data;
				this.$set(this.list, index, data)
				// #endif
			},
			save() {
				if (this.list.length == 0) {
					uni.$u.toast("无数据");
					return;
				}
				let stock_out_list = [];
				// 'id': 128,                                       #如果为0，表示是前端创建的，后端拉取的有id,会更新相应的出库申请
				//          'material_top_category_id':1,
				//         'material_id': 394326,
				//         'actual_main_qty': 3.0,                           #这是实际出库数量
				//          'main_unit_id': 9,
				//          'main_price': 0.0,
				//          'stock_qty': 0.0
				this.list.forEach(v => {
					let item = {
						id: v.id,
						material_top_category_id: '',
						material_id: v.material_id,
						actual_main_qty: v.actual_main_qty,
						main_unit_id: v.main_unit_id,
						main_price: v.main_price,
						stock_qty: v.stock_qty,
						date: v.date,
					};
					stock_out_list.push(item);
				});

				uni.showLoading({
					title: "加载中",
				});
				confirm_to_stock_out({
						stock_out_list: stock_out_list
					}).then((res) => {
						uni.$u.toast("操作成功");
						setTimeout(() => {
							uni.$emit('refresh_stockOut');
							uni.$emit('refresh_stockDetail');
							if (this.bagList.length > 0) {
								uni.$u.route({
									type: 'navigateBack',
									delta: 2
								})
							} else {
								uni.navigateBack();
							}
						}, 2000);
					})
					.catch(() => {})
					.finally(() => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					});
			},
			set_material_obj(data) {
				let material_obj = {};
				data.forEach(v => {
					material_obj[v.material_id[0]] = v;
				});
				this.material_obj = material_obj;
			},
			getData() {
				this.loadingStatus = 'loading';
				uni.showLoading({
					title: '加载中'
				});
				this.date = '';
				stock_out_app_detail({
					stock_out_app_record_list: this.ids
				}).then((res) => {
					this.set_material_obj(res.result['库存']);
					let list = [];
					res.result.stock_out_record_detail.forEach((v, i) => {
						let material = this.material_obj[v.material_id[0]] || {};
						list.push({
							...v,
							_material_id: v.material_id[1],
							material_id: v.material_id[0],
							actual_main_qty: v.purchase_unit_qty,
							stock_qty: material.stock_qty || 0,
							main_unit_id: v.purchase_unit_id[0],
							_main_unit_id: v.purchase_unit_id[1],
							main_price: this.formatPrice(v.avg_main_unit_price * v.purchase_unit_qty),
							date:this.today_year_month_day
						})
						// this.checkboxValue.push(i);
					})
					this.list = list;
				}).catch(() => {

				}).finally(() => {
					this.loadingStatus = 'end';
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			},
			updataList(){
				let stock_obj = this.$store.getters.get_stock_obj;
				let list = [];
				this.bagList.forEach(v => {
					let material = stock_obj[v.id] || {};
					let stock_cost = v.stock_cost || material.stock_cost;
					let stock_qty = v.stock_qty || material.stock_qty;
					// console.log(material);
					let avg_main_unit_price = 0;
					try{
						avg_main_unit_price = stock_cost / stock_qty;
					}catch(e){}
					let actual_main_qty = v.value || 1;
					list.push({
						id: 0,
						_material_id: v.name || material.material_id[1],
						material_id: v.id,
						actual_main_qty: actual_main_qty,
						stock_qty: stock_qty || 0,
						main_unit_id: v.unit_id || material.main_unit_id[0],
						_main_unit_id: v.unit_name || material.main_unit_id[1],
						main_price: this.formatPrice(avg_main_unit_price * actual_main_qty),
						avg_main_unit_price: avg_main_unit_price,
						date:this.today_year_month_day
					})
				})
				this.list = list;
			}
		},
		onLoad(d) {
			this.from = d.from||'';
			if (d.bagList) {
				this.bagList = JSON.parse(d.bagList);
				this.updataList();
			}
			if(d.ids){
				let ids = d.ids.split(',');
				ids.forEach(v => {
					this.ids.push(Number(v));
				});
				this.getData();
			}
			
		},
		onShow() {
			// this.role = this.$store.getters.get_role;
			// this.isChef = this.$store.getters.get_role == 'chef';
			// this.isPurchaser = this.$store.getters.get_role == 'purchaser';
			// this.getData();
		},
		onReady() {},
		onPullDownRefresh() {
			this.getData();
		},
	};
</script>

<style lang="scss" scoped>
	.blank {
		height: calc(60rpx + 40px);
	}

	.btn-confirm {
		height: 90upx;
		line-height: 90upx;
		width: 200upx;
		text-align: center;
		background-color: #675f91;
		color: #ffffff;
	}

	/deep/.col-item {
		padding: 20upx 10upx;
		text-align: center;
	}

	/deep/.input_border_bottom {
		line-height: 72upx;
		height: 72upx;
		font-size: 28upx;
		border-bottom: 1px solid #cccccc;
	}

	/deep/.input_border_bottom_red {
		color: #D6251F;
		border-bottom: 1px solid #D6251F;
	}
</style>